<template>
  <div >
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="border1"></div>
          <div class="logo br-5 pt-re yuyue">
            <img src="../../assets/images/others/yuyue.png" alt="" />
          </div>
          <div class="num_box">
            <div class="num">{{ num_info?.appointmentToday }}</div>
            <div class="title">今日预约</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="border2"></div>
          <div class="logo br-5 pt-re jiezhen">
            <img src="../../assets/images/others/jiezhen.png" alt="" />
          </div>
          <div class="num_box">
            <div class="num">{{ num_info?.receptionToday }}</div>
            <div class="title">今日接诊</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="border3"></div>
          <div class="logo br-5 pt-re guahao">
            <img src="../../assets/images/others/guahao.png" alt="" />
          </div>
          <div class="num_box">
            <div class="num">{{ num_info?.appointmentRegister }}</div>
            <div class="title">预约挂号</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script >
export default {
  props: ["num_info"],
 
};
</script>

<style lang='less' scoped>
.el-card__body .logo {
  width: 6rem;
  height: 6rem;
  img {
    width: 2.25rem;
    height: 2.75rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.guahao {
  background-color: #fff5e7;
}
.jiezhen {
  background-color: #eaf2fe;
}
.yuyue {
  background-color: var(--lightColor);
}
.border1 {
  position: absolute;
  left: 0;
  top: 0;
  height: 0.625rem;
  background-color: var(--lightColor);
  width: 100%;
}
.border2 {
  position: absolute;
  left: 0;
  top: 0;
  height: 0.625rem;
  background-color: #eaf2fe;
  width: 100%;
}
/deep/ .el-card__body {
  height: 8.875rem;
  box-sizing: border-box;
}
.border3 {
  position: absolute;
  left: 0;
  top: 0;
  height: 0.625rem;
  background-color: #fff5e7;
  width: 100%;
}
.el-card {
  position: relative;
}
.num_box {
  position: absolute;
  left: 16.25rem;
  top: 2.375rem;
  text-align: center;
  .num {
    font-weight: bold;
    color: #333333;
    font-size: 2.25rem;
  }
  .title {
    font-size: 1.125rem;
    font-weight: 400;
    color: #838383;
    margin-top: 1.2rem;
  }
}
</style>